<template>
  <view class="login-container">
    <view class="logo">
      <image src="/static/logo.png" mode="aspectFit"></image>
    </view>
    
    <view class="title">COAI协同工具</view>
    <view class="subtitle">基于AI的智能协同平台</view>
    
    <view class="form">
      <view class="input-group">
        <input 
          v-model="username" 
          placeholder="请输入用户名/邮箱"
          placeholder-class="placeholder"
        />
      </view>
      
      <view class="input-group">
        <input 
          v-model="password" 
          type="password"
          placeholder="请输入密码"
          placeholder-class="placeholder"
        />
      </view>
      
      <button 
        class="login-btn" 
        :loading="loading"
        @click="handleLogin"
      >
        登录
      </button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const username = ref('')
const password = ref('')
const loading = ref(false)

const handleLogin = async () => {
  if (!username.value || !password.value) {
    uni.showToast({
      title: '请输入用户名和密码',
      icon: 'none'
    })
    return
  }
  
  loading.value = true
  
  try {
    const res = await uni.request({
      url: 'http://localhost:8080/api/users/login',
      method: 'POST',
      data: {
        usernameOrEmail: username.value,
        password: password.value
      }
    })
    
    if (res.data.success) {
      uni.setStorageSync('token', res.data.data.token)
      uni.setStorageSync('user', res.data.data.user)
      
      uni.reLaunch({
        url: '/pages/chat/chat'
      })
    } else {
      uni.showToast({
        title: res.data.message || '登录失败',
        icon: 'none'
      })
    }
  } catch (error) {
    uni.showToast({
      title: '网络错误',
      icon: 'none'
    })
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.login-container {
  padding: 100rpx 60rpx;
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.logo {
  width: 200rpx;
  height: 200rpx;
  margin: 0 auto 40rpx;
}

.logo image {
  width: 100%;
  height: 100%;
}

.title {
  font-size: 48rpx;
  font-weight: bold;
  color: white;
  text-align: center;
  margin-bottom: 20rpx;
}

.subtitle {
  font-size: 28rpx;
  color: rgba(255, 255, 255, 0.8);
  text-align: center;
  margin-bottom: 80rpx;
}

.form {
  background: white;
  border-radius: 20rpx;
  padding: 60rpx 40rpx;
}

.input-group {
  margin-bottom: 40rpx;
}

.input-group input {
  width: 100%;
  height: 90rpx;
  padding: 0 30rpx;
  background: #f5f5f5;
  border-radius: 10rpx;
  font-size: 28rpx;
}

.placeholder {
  color: #999;
}

.login-btn {
  width: 100%;
  height: 90rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 10rpx;
  font-size: 32rpx;
  border: none;
  margin-top: 20rpx;
}
</style>
